<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="main-header">
        <p>协作者账号管理</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="content">
        <p class="content-title font-14">创建账号</p>
        <div class="create-account flex flex-align-items-center">
          <img src="https://www.wotohub.com/static/img/koc_default_man.8132f247.svg">
          <p class="font-14">绿水青山</p>
        </div>
        <p class="content-title font-14">协作账号</p>
        <div v-for="(item, index) in currentCheck" :key="index" class="item flex-between flex-align-items-center">
          <el-select v-model="item.account" placeholder="请选择" size="large" style="width: 180px;">
            <el-option v-for="option in accountList" :key="option.id" :label="option.name" :value="option.id" />
          </el-select>
          <div class="flex flex-align-items-center">
            <el-select v-model="item.authority" placeholder="请选择" size="large" style="width: 120px;">
              <el-option v-for="option in authorityList" :key="option.value" :label="option.name" :value="option.value" />
            </el-select>
            <div class="btns flex">
              <i v-if="item.draft" class="iconfont icon-tick pointer" @click="confirm(index)"></i>
              <i v-if="item.draft" class="iconfont icon-guanbi2 pointer" @click="cancel(index)"></i>
              <i v-if="!item.draft" class="iconfont icon-shanchu pointer" @click="del(index)"></i>
            </div>
          </div>
        </div>
        <div v-if="!currentCheck.some(item => item.draft)" class="add-btn flex flex-align-items-center font-14 pointer"
          @click="addForm">
          <i class="iconfont icon-jiahao"></i>添加协助者账号
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
const props = defineProps(['list']);
const emit = defineEmits(['change', 'close']);

const authorityList = [
  {
    name: '可查看',
    value: 1
  },
  {
    name: '可编辑',
    value: 2
  }
];

const accountList = ref([
  {
    name: '谢谢',
    id: 1
  },
  {
    name: '谢谢1',
    id: 2
  }
]);
const currentCheck = ref([
  ...props.list
]);

const addForm = () => {
  if (accountList.value.length > currentCheck.value.length) {
    currentCheck.value.push({
      account: null,
      authority: 1,
      draft: true
    });
  }
}
const close = () => {
  emit('close');
}
const confirm = index => {
  currentCheck.value[index].draft = undefined;
  emit('change', currentCheck.value);
}
const cancel = index => {
  currentCheck.value.splice(index, 1);
}
const del = index => {
  currentCheck.value.splice(index, 1);
  emit('change', currentCheck.value);
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: relative;
    z-index: 10;
    width: 480px;
    border-radius: 2px;
    background: #fff;

    .content {
      padding: 16px 24px;

      .content-title {
        color: #333;
        margin-bottom: 20px;
      }

      .create-account {
        margin-bottom: 20px;

        img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          margin-right: 5px;
        }

        p {
          color: #666;
        }
      }

      .add-btn {
        color: @main-color;

        i {
          color: @main-color;
          margin-right: 5px;
        }
      }

      .item {
        height: 60px;
        border-bottom: 1px solid #e9e9e9;
        margin-bottom: 20px;

        .btns {
          margin-left: 20px;

          i {
            margin-right: 5px;
            font-size: 24px;

            &:last-child {
              margin-right: 0;
            }

            &.icon-tick {
              color: @main-color;
              font-size: 26px;
            }

            &.icon-guanbi2 {
              color: #606266;
            }

            &.icon-guanbi2 {
              color: #606266;
            }
          }
        }
      }
    }
  }
}
</style>
